<template>
	<view class="add-distri">
		<NavBar title="添加配送"/>
		<view class="content">
			<view class="distri-type">
				<view class="item">
					<view class="label"> 配送方式 </view>
					<view class="value" @tap="selectRef.open()">
						<text> {{shipmentsInfo.shipments_name}} </text>
						<image class="right" src="/static/icon/order/right.png" />
					</view>
				</view>
				<view class="item" v-if="shipmentsInfo.shipments == 2">
					<view class="label"> 提货时间 </view>
					<view class="value" @tap="selectTimeRef.open()">
						<text> {{pickerTime?pickerTime:'设置上门提货时间'}} </text>
						<image class="right" src="/static/icon/order/right.png" />
					</view>
				</view>
			</view>
			<view class="distri-baoyou"  v-if="shipmentsInfo.shipments == 3">
				<view class="item">
					<view class="label"> 满额包邮 </view>
					<view class="value"> 
						<image class="switch-img" src="/static/icon/mine/a-switch.png" mode="widthFix" v-if="shipmentsInfo.satisfy_mian_switch == 1"/>
						<image class="switch-img" src="/static/icon/mine/switch.png" mode="widthFix" v-else/>
					</view>
				</view>
				<view class="item">
					<view class="label"> 价格 </view>
					<view class="value">
							<input type="number" placeholder="输入满额包邮价格" placeholder-style="color: #D8D8D8;font-size: 14px;" />
					</view>
				</view>
			</view>
			<view class="distri-qisong" v-if="shipmentsInfo.shipments == 1">
				<view class="item">
					<view class="label"> 满额起送 </view>
					<view class="value" @tap="changeTakeOutStatus">
						<image class="switch-img" src="/static/icon/mine/a-switch.png" mode="widthFix" v-if="shipmentsInfo.satisfy_song_switch == 1"/>
						<image class="switch-img" src="/static/icon/mine/switch.png" mode="widthFix" v-else/>
					</view>
				</view>
				<view class="item">
					<view class="label"> 价格 </view>
					<view class="value">
						<input v-model="shipmentsInfo.satisfy_song" type="number" placeholder="输入满额起送价格" placeholder-style="color: #D8D8D8;font-size: 14px;" />
					</view>
				</view>
			</view>
			<view class="distri-num">
				<view class="item">
					<view class="label"> 序号 </view>
					<view class="value">
						<input v-model="shipmentsInfo.sort" type="number" placeholder="序号越大越靠前" placeholder-style="color: #D8D8D8;font-size: 14px;" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 状态 </view>
					<view class="value" @tap="changeShipmentsStatus">
						<image class="switch-img" src="/static/icon/mine/a-switch.png" mode="widthFix" v-if="shipmentsInfo.status==1"/>
						<image class="switch-img" src="/static/icon/mine/switch.png" mode="widthFix" v-else/>
					</view>
				</view>
			</view>
			<view class="btn" @tap="addShipments"> 保存 </view>
		</view>
		<BottomSelectPopup ref="selectRef" @selected="selected"/>
		<SelectTime ref="selectTimeRef" @selectedTime="selectTime" />
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import SelectTime from '@/components/SelectTime.vue'
	import BottomSelectPopup from '@/components/BottomSelectPopup.vue'
	import { AddOrEditShipmentsApi } from '@/service/shop.js'
	const selectRef = ref()
	const selectTimeRef = ref()
	const shipmentsInfo = ref({
		shipments: 1, //1=同城配送 2=到店自提 3=快递配送
		shipments_name: "同城配送", //名称
		satisfy_song: "", //满X元起送   shipments==3必填
		satisfy_song_switch: 1, //满X元起送开关   1=开启 0=关闭    shipments==3必填
		satisfy_mian: "", //满X元免快递费    shipments==3必填
		satisfy_mian_switch: 1, //满X元免快递费开关  1=开启 0=关闭   shipments==3必填
		express_money: "",
		pick_time: '', //提货时间   shipments==2必填
		sort: "", //序号
		status: 1
	})
	const pickerTime = ref('') // 此字段仅供展示
	// 选择配送方式
	const selected = (e) => {
		if(e == '同城配送') {
			shipmentsInfo.value.shipments = 1
		} else {
			shipmentsInfo.value.shipments = 2
		}
		shipmentsInfo.value.shipments_name = e
		selectRef.value.close()
	}
	// 选择自提时间
	const selectTime = (e) => {
		console.log(e.replace('至', '-'));
		shipmentsInfo.value.pick_time = e.replace('至', '-')
		pickerTime.value = e
		selectTimeRef.value.close()
	}
	const changeTakeOutStatus = () => {
		if (shipmentsInfo.value.satisfy_song_switch == 1) {
			shipmentsInfo.value.satisfy_song_switch = 0
		} else {
			shipmentsInfo.value.satisfy_song_switch =1
		}
	}
	// 修改配送状态
	const changeShipmentsStatus = () => {
		if (shipmentsInfo.value.status == 1) {
			shipmentsInfo.value.status = 0
		} else {
			shipmentsInfo.value.status = 1
		}
	}
	const addShipments = () => {
		const { shipments, shipments_name, satisfy_song, satisfy_song_switch, pick_time, sort, status } = shipmentsInfo.value
		let params = { }
		if(shipments == 1) {
			params = { shipments, shipments_name, satisfy_song, satisfy_song_switch, sort, status }
		} else {
			params = { shipments, shipments_name, pick_time, sort, status }
		}
		AddOrEditShipmentsApi(params).then(res => {
			uni.navigateBack()
		})
	}
	onLoad((e) => {
		const { info } = e
		if(info) shipmentsInfo.value = JSON.parse(info)
	})
</script>

<style scoped lang="scss">
	.add-distri {
		.content {
			padding: 10px 12px;
		}
		.distri-type, .distri-baoyou, .distri-qisong, .distri-num {
			padding: 0 12px;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.label {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
				}
				.value {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					display: flex;
					align-items: center;
					input {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
					}
					.switch-img {
						width: 40px;
					}
					.right {
						width: 14px;
						height: 14px;
						margin-left: 6px;
					}
				}
			}
		}
		.btn {
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			margin-top: 20px;
			background: #FF3B1E;
			border-radius: 106px 106px 106px 106px;
		}
	}
</style>
